import React, { useEffect, useState } from 'react';
import { Table, Tag, Button, Switch, notification, message} from 'antd';
import { ColumnsType } from 'antd/es/table';
import { useNavigate } from 'react-router-dom';
import service from '../../../api';
import _, { set, values } from 'lodash';


function Pro(props: any) {
  const [seckillList, setSeckill] = useState([]);
  
  
  interface DataType {
    key: any;
    img1: string;
    proname:string;
    brand:string;
    category:string;
    isseckill:number;
    originprice:number;
    discount:number;
    sales:number;
    proid:string;
  }
  //获取商品列表
  var getShowdata = async () => {
    var res = await service.pro.proShowdata({type:'isseckill',flag:1});
    setSeckill(res.data.data);
    console.log(res);
  }
  useEffect(() => {
    getShowdata();
  }, [])
  //切换状态
  const change = async (checked:any,proid:any,type:any) => {
    const res = await service.pro.proUpdateFlage({ flag:checked,proid,type});
    console.log(res);
    if (res.data.code === '200') {
      message.success('修改成功');
    }
    var newSecList = _.cloneDeep(seckillList);
    setSeckill(newSecList);
    getShowdata();
  }
 
    

  const columns: ColumnsType<DataType> = [
    {
      title: '序号',
      key: 'index',
      dataIndex: 'index',
      render: (_, text, index) => <div>{index + 1}</div>,
    },
    {
      title: '图片',
      key: 'pic',
      dataIndex: 'pic',
      render: (_, record, index) => <img src={record.img1} alt="" />,
    },
    {
      title: '名称',
      key: 'role',
      dataIndex: 'link',
      render: (_, record, index) =>
        <div>{record.proname}</div>,
    },{
      title: '品牌',
      key: 'dsad',
      dataIndex: 'link',
      render: (_, record, index) =>
        <div>{record.brand}</div>,
    },{
      title: '分类',
      key: 'dsadad',
      dataIndex: 'link',
      render: (_, record, index) =>
        <div>{record.category}</div>,
    },{
      title: '票价',
      key: 'zcz',
      dataIndex: 'link',
      render: (_, record, index) =>
        <div>{record.originprice}</div>,
    },{
      title: '折扣',
      key: 'wfc',
      dataIndex: 'link',
      render: (_, record, index) =>
        <div>{record.discount}</div>,
    },{
      title: '销量',
      key: 'lkj',
      dataIndex: 'link',
      render: (_, record, index) =>
        <div>{record.sales}</div>,
    },
    {
      title: '是否秒杀',
      key: 'qcae',
      dataIndex: 'link',
      render: (_, record, index) =>
        <Switch checked={record.isseckill==1} onChange={(checked)=>change(checked,record.proid,'isseckill')} />,
    },
    {
      title: '操作',
      key: 'action',
      render: (_, record, index) => (
        <div className='twoButtn'>
          
          <Button type='primary' size='small' danger={true}>删除</Button>
        </div>
      ),
    },
  ];

 


  return (
    <div className='adminbiao'>
      <Table className='probg' rowKey='adad' columns={columns} dataSource={seckillList} />
    </div>
  );
}

export default Pro;